<template>
	<view class="qrOrder">
		<view class="container">
			<view class="card card1" v-for="(item, i) in address" :key="i" @click="toNav(`address/address`)">
				<image class="left" src="@/static/images/dd01.png" mode="aspectFit"></image>
				<view class="info">
					<view class="row">
						<text>{{ item.name }}</text>
						<text>{{ item.phone }}</text>
					</view>
					<view class="row2" v-if="item.areaName">
						<text>{{ item.areaName }} {{ item.address }}</text>
					</view>
				</view>
				<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
			</view>

			<view class="card card2">
				<view class="title">商品详情</view>
				<view class="goods" v-for="(item, i) in list" :key="i">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="info">
						<view class="row">
							<text class="line-2">{{ item.title }}</text>
							<text>{{ item.key_vals }}</text>
						</view>
						<view class="row2">
							<text>{{ item.price_sale }}鞋服豆</text>
							<view class="box">
								<u-number-box v-model="item.num" @change="valChange"></u-number-box>
							</view>
						</view>
					</view>
				</view>

				<view class="info-item">
					<label>配送服务</label>
					<input type="text" value="快递派送" :disabled="true" />
				</view>
				<view class="info-item" @click="bzpop = true">
					<label>订单备注</label>
					<input v-model="viewForm.remark" type="text" class="line-1" :disabled="true" />
					<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 			<view v-if="showVipCard" class="gbbox" @click="handleVipCard">
				<view class="lbox">
					<image class="icon" src="@/static/images/qrzs.png" mode="aspectFit"></image>
					<text>开通会员享受平台优惠</text>
				</view>
				<view class="rbox">
					<image v-if="ktvip" src="@/static/images/radio.png" mode="aspectFit"></image>
					<text v-else class="yuan"></text>
				</view>
			</view> -->

			<view class="card card2">
				<view class="title">价格明细</view>
				<view class="info-item" style="margin-top: 20rpx">
					<view class="innerbox">
						<label>商品总价</label>
						<input type="text" class="line-1" :value="`共${summation('num') || 0}件商品`" :disabled="true" />
					</view>
					<text>{{ summation('price_sale') || 0 }} 鞋服豆</text>
				</view>

				<view class="totalbox">
					<text>合计应付</text>
					<text>{{ summation('price_sale') || 0 }} 鞋服豆</text>
				</view>
			</view>
		</view>
		<u-popup :show="bzpop" round="24rpx" :closeOnClickOverlay="true" @close="bzpop = false">
			<view class="bzpopbox">
				<view class="title">订单备注</view>
				<u--textarea v-model="form.remark" height="292rpx" count :maxlength="200" placeholder="选填，填写您的需求，付款后商家可见"></u--textarea>
				<footer-btn text="确定" @submit="handlebzpop"></footer-btn>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
		<footer-btn text="提交订单" :disabled="footer_disabled" showTotal :total="summation('price_sale') || 0" @submit="submit"></footer-btn>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'qrOrder',
	computed: {
		summation() {
			return (key, i = 0) => {
				if (this.list.length > 0) {
					if (key === 'price_sale') {
						return this.list
							.reduce((total, current) => {
								return total + parseFloat(current[key]) * current.num;
							}, 0)
							.toFixed(i);
					}

					return this.list
						.reduce((total, current) => {
							return total + parseFloat(current[key]);
						}, 0)
						.toFixed(i);
				} else {
					return 0;
				}
			};
		}
	},
	data() {
		return {
			footer_disabled: false,
			bzpop: false,
			yhqpop: false,
			showVipCard: false,
			ktvip: false,
			address: [],
			info: {},
			order_info: {},
			list: [],
			viewForm: {},
			form: {
				remark: ''
			}
		};
	},
	onLoad(data) {},
	onShow() {
		this.getAddress();
		this.init(false);
	},
	methods: {
		submit() {
			let inventoryId = this.list
				.map((item) => item.inventoryId)
				.filter(Boolean)
				.join(',');
			let num = this.list
				.map((item) => item.num)
				.filter(Boolean)
				.join(',');
			if (!this.address[0].id) {
				this.msg('请选择地址');
				return;
			}
			let params = {
				...this.form,
				num,
				inventoryId,
				peisong_type: 3,
				address_id: this.address[0].id
			};
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			// 【下订单】orders_create
			// this.$http.getJson('money_jifenOrder', params).then((res) => {
			this.$http.getJson('money_xieFuDouOrder', params).then((res) => {
				const { code, message, data, isOver } = res;
				if (code == 1) {
					//0需要继续支付 1不需要
					if (isOver == 0) {
						this.pay_order(res.order_id);
					} else {
						this.msg(message, () => {
							this.toNav(`paysuccess/paysuccess?id=${res.order_id}&is_jifen=2`);
						});
					}
				} else {
					this.msg(message);
				}
			});

			// API.getJson('orders_create', params).then((res) => {
			// 	uni.hideLoading();
			// 	const { code, data, message, order_id } = res;
			// 	console.log(res, 'orders_getPayInfo');
			// 	if (code === 1) {
			// 		uni.showToast({
			// 			title: message,
			// 			icon: 'success'
			// 		});
			// 		this.pay_order(order_id);
			// 	} else {
			// 		uni.showToast({
			// 			title: message,
			// 			icon: 'none'
			// 		});
			// 	}
			// });
		},

		pay_order(order_id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			API.getJson('orders_wxPay', { order_id }).then((res) => {
				uni.hideLoading();
				const { code, data, message } = res;
				if (code === 1) {
					API.wx_pay(data).then((res) => {
						this.toNav(`paysuccess/paysuccess?id=${order_id}&is_jifen=1`);
					});
				} else {
					this.msg(message);
				}
			});
		},

		getPriceInfo() {
			let product_info = this.list.map((item) => {
				return {
					inventoryId: item.inventoryId,
					productId: item.productId,
					num: item.num
				};
			});
			let params = {
				product_info: JSON.stringify(product_info),
				buy_vip: this.ktvip ? 1 : 0,
				yhq_id: this.info.yhq_id
			};
			// 【预下单】orders_getPayInfo
			API.getJson('orders_getPayInfo', params).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.footer_disabled = false;
					this.order_info = data;
				} else {
					this.footer_disabled = true;
					this.init(false);
					this.$refs.uToast.show({
						message,
						duration: 5000,
						complete: () => {
							this.toBack();
						}
					});
				}
			});
		},

		handlebzpop() {
			this.viewForm = { ...this.form };
			this.bzpop = false;
		},
		getAddress() {
			API.getJson('userAddress_lists', {}).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					let addressList = data.filter((item) => item.if_default);
					if (addressList.length === 0) {
						this.address = [{ name: '请选择地址' }];
					} else {
						this.address = addressList;
					}
				}
			});
		},
		init(flag = true) {
			let order_info = uni.getStorageSync('jforder_info') || [];
			if (order_info[0]) {
				this.info = order_info[0];
			}
			this.list = order_info;
			if (flag) this.getPriceInfo();
		},

		handleVipCard() {
			this.ktvip = !this.ktvip;
			this.getPriceInfo();
		},
		valChange(e) {}
	}
};
</script>

<style lang="less" scoped>
.qrOrder {
	.bzpopbox {
		padding: 32rpx;
		height: 820rpx;
		border-radius: 24rpx;
		.title {
			text-align: center;
			padding-bottom: 46rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.zffs {
		.flex-between();
		text:nth-of-type(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		.box {
			display: flex;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
	.totalbox {
		.flex-between();
		padding-top: 34rpx;
		margin-top: 34rpx;
		border-top: 1px solid #f3f4f8;
		text:nth-of-type(1) {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}
		text:nth-of-type(2) {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
	}
	.gbbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 686rpx;
		height: 84rpx;
		padding: 0 24rpx;
		margin: 16rpx 0;
		background: #1c1212;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.lbox {
			display: flex;
			align-items: center;
			.icon {
				width: 31rpx;
				height: 27rpx;
				margin-right: 16rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffd8a7;
			}
		}
		.rbox {
			display: flex;
			align-items: center;
			.yuan {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #ffd8a7;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.right_img {
		width: 13rpx;
		height: 24rpx;
	}
	.info-item + .info-item {
		padding-top: 30rpx;
	}
	.info-item {
		.flex-between();
		.innerbox {
			display: flex;
			label {
				width: 130rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			input {
				flex: 1;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				text-align: left;
			}
		}
		label {
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		input {
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			text-align: right;
		}
		& > text {
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		image {
			margin-left: 24rpx;
		}
	}
	.container {
		padding: 24rpx 32rpx;
		.card2 {
			.goods + .goods {
				border-top: 1rpx solid #eee;
			}
			.goods {
				display: flex;
				padding: 32rpx 0;
				image {
					width: 176rpx;
					height: 176rpx;
					background: #f8f8f8;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 24rpx;
					.row {
						text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						text:nth-of-type(2) {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					.row2 {
						.flex-between();
						& > text {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			padding: 34rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
		}
		.card1 {
			display: flex;
			align-items: center;
			.j-active2();
			.left {
				width: 56rpx;
				height: 56rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				margin-left: 24rpx;
				.row {
					display: flex;
					align-items: flex-end;
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222222;
						margin-right: 24rpx;
					}
					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: PingFang SC-Heavy, PingFang SC;
						color: #333333;
					}
				}
				.row2 {
					font-size: 24rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #333333;
				}
			}
		}
	}
}
</style>
